const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const  HTMLWebpackPlugin= require('html-webpack-plugin')
const path = require('path')
const {ProgressPlugin} = require("webpack")

const miniCssExtractPlugin = new MiniCssExtractPlugin()
const progressPlugin = new ProgressPlugin({
    entries:true,
    modules:true,
    dependencies:true
})
const htmlWebpackPlugin = new HTMLWebpackPlugin({
    template:'./public/index.html'
})
module.exports = {
    entry:"./src/index.tsx",
    output:{
        path:path.resolve(__dirname,'./../dist'),
        clean:true,
        filename:'bundle.js'
    },
    resolve:{
        alias:{
            "@":path.resolve(__dirname,"../src")
        },
        extensions: [".tsx", ".ts", ".jsx" ,".js", ".mjs",""]
    },
    module:{
        rules:[
            {
                test:/(\.css|\.less)$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            },
            {
                test:/(\.js|\.ts|\.tsx|\.mjs)$/,
                use:['ts-loader']
            }
        ]
    },
    optimization:{
        minimizer:[
            new CssMinimizerPlugin()
        ]
    },
    plugins:[miniCssExtractPlugin,progressPlugin,htmlWebpackPlugin]
}